<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row">
                            <label class="col-form-label">站点:</label>
                            <div class="col-lg-4">
                                <el-select
                                    v-model="searchForm.id"
                                    filterable
                                    remote
                                    clearable 
                                    reserve-keyword
                                    placeholder="请输入关键词"
                                    :remote-method="initDataList"
                                    :loading="loading">
                                    <el-option
                                    v-for="item in siteList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>      
                        </div>
                    </div>
                    <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                        <div class="m-form__actions m-form__actions--solid">
                            <div class="row">
                                <div class="col m--align-left">

                                </div>
                                <div class="col m--align-right">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>                
                <iframe ref="lcDesignWinIframe" :src="iframeSrc" :height="height" width="100%" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</template>
<script>
import apiUtil from "@/core/util/apiUtil.js";
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            siteList:[],
            pageNo: 1,      // 默认当前是第一页
            pageSize: 5,    // 当前每页的数据是5条
            loading: false,
            searchForm:{id:"",},
            title: "在线预览",
            iframeSrc: process.env.BASE_URL + "deng/view/iot/graph-preview/index.html",
            height: KTUtil.getViewPort().height - 420,
        }
    },
    components: {
    },
    watch: {
        "searchForm.id": {//监听字段变化
            handler: function (newVal, old) {
                this.init()
            }
        },
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "电力实时监控" }]);
    },
    methods: {
        initDataList(query){
            this.loading = true;                   
            let params = {};
            let searchF = {};
            searchF.name = query;
            params.usePageNo = true;//采用第几页进行分页（兼容）
            params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            params.pageNo = this.pageNo;//开始的记录序号   
            params.searchJson = JSON.stringify(searchF);//为form元素     
            apiUtil.queryPage(process.env.VUE_APP_MONITOR_API + "/graphSite/list", params).then(({ data }) => {
                this.loading = false;
                this.siteList = data.data;    
            });            
        },
        init() {
            this.iframeSrc = process.env.BASE_URL + "deng/view/iot/graph-preview/index.html?id=" + this.searchForm.id
            setTimeout(() => {
                this.initIframeWin();
            }, 100);
        },
        initIframeWin() {
            let oauthModules = process.env.VUE_APP_OAUTH_API;

            //监控中心API
            let monitorModules = process.env.VUE_APP_MONITOR_API;

            //运维中心API
            let opModules = process.env.VUE_APP_OP_API;

            //平台中心API
            let sysModules = process.env.VUE_APP_SYS_API;

            //工作流中心API
            let workflowModules = process.env.VUE_APP_WORKFLOW_API;

            //文件中心API
            let fileModules = process.env.VUE_APP_FILE_API;

            //日志中心API
            let logModules = process.env.VUE_APP_LOG_API;

            //即时通讯中心API
            let imModules = process.env.VUE_APP_IM_API;

            //即时通讯中心WebSocket
            let imWebSocketModules = process.env.VUE_APP_IM_WEBSOCKET_API;

            //报表中心API
            let reportModules = process.env.VUE_APP_REPORT_API;

            //调度中心API
            let jobModules = process.env.VUE_APP_JOB_API;

            //病历云API
            let medicalModules = process.env.VUE_APP_MEDICAL_API;

            //运管平台API
            let ompModules = process.env.VUE_APP_OMP_API;

            const lcDesignIframe = this.$refs.lcDesignWinIframe;
            // 因为iframe页面打开就已经加载 获取接口成功后刷新他                   
            lcDesignIframe.contentWindow.location.reload()
            let params = {
                oauthModules: oauthModules,
                monitorModules: monitorModules,
                opModules: opModules,
                sysModules: sysModules,
                workflowModules: workflowModules,
                fileModules: fileModules,
                logModules: logModules,
                imModules: imModules,
                imWebSocketModules: imWebSocketModules,
                reportModules: reportModules,
                jobModules: jobModules,
                medicalModules: medicalModules,
                ompModules: ompModules,
                basePath: process.env.BASE_URL
            }
            if (lcDesignIframe.attachEvent) {
                // 兼容浏览器判断 // iframe的加载完成函数         
                lcDesignIframe.attachEvent('onload', function () {
                    const iframeWin = lcDesignIframe.contentWindow
                    //传递参数           
                    iframeWin.postMessage(params, '*')
                })
            } else {
                // iframe的加载完成函数         
                lcDesignIframe.onload = function () {
                    const iframeWin = lcDesignIframe.contentWindow
                    console.log(iframeWin);
                    //传递参数           
                    iframeWin.postMessage(params, '*')
                }
            }
        },
        // initSiteList(){
        //     let params = {};
        //     apiUtil.query(process.env.VUE_APP_MONITOR_API+"/graphSite/list", params).then(({ data }) => {
        //         this.siteList = data.data;
        //     });
        // }
    }
}
</script>